<template>
  <div class="venus-list-page">
    <!--签约查询界面-->
    <div class="page-search">
      <!--:rules prop 如果不要校验那么这个属性可以不填-->
      <el-form
        label-width="160px"
        style="margin: 20px 50px 20px 0px;"
        size="mini"
      >
        <el-row>
          <!--英文名-->
          <el-col :span="8">
            <el-form-item label="英文名:">
              <el-input v-model='table.bean_table.name'></el-input>
            </el-form-item>
          </el-col>
          <!--流程名-->
          <el-col :span="8">
            <el-form-item label="中文名:">
              <el-input v-model='table.bean_table.displayName'></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <div style="text-align: center;">
          <el-button type="success" @click="search">查询</el-button>
          <el-button type="info" plain @click="resetForm">重置</el-button>
          <el-button type="success" @click="addBean">新增</el-button>
        </div>
      </el-form>
    </div>
    <!-- 查询列表返显 -->
    <div class="page-list">
      <table-pagination
        :table-data="table.bean_table.tableData"
        :table-header-config="table.tableHeaderConfig"
        :operation-config="table.operationConfig"
        highlight-current-row
        :total="table.bean_table.total"
        :page-size="table.bean_table.limit"
        :now-page="table.bean_table.nowPage"
        @current-change="currentChange"
      />
    </div>
  </div>
</template>

<script>
  import request from '../../../utils/request'

  export default {
    name: 'Flows',
    data() {
      return {
        /* 字典 */
        dict: {},
        /* 表格 */
        table: {
          // 表头配置
          tableHeaderConfig: [
            // { prop: 'order', label: '序号' },
            { prop: 'name', label: '英文名' },
            { prop: 'displayName', label: '中文名' },
            { prop: 'version', label: '版本' },
            { prop: 'creator', label: '创建人' },
            { prop: 'createTime', label: '创建时间' }
          ],
          // 表格操作配置
          operationConfig: {
            fixed: 'right',
            width: 200,
            operationButton: [
              // 每一个操作。value:操作文字；func:回调函数
              { value: '编辑', func: this.myEdit },
              { value: '发布', func: this.myPublic },
              { value: '删除', func: this.myDelete },
              { value: '复制', func: this.myCopy }
            ]
          },
          bean_table: {
            total: 0, // 总条数
            nowPage: 1, // 当前第几页
            limit: 5, // 分页配置
            tableData: [], // 表格数据
            // exeid: 'queryTrustInfo', // exeid
            // 查询条件
            name: '', // 英文名
            displayName: '' // 中文名
          }
        }
      }
    },
    mounted() {
      this.init()
    },
    methods: {
      init() {
        /* 加载表格数据 */
        this.table.bean_table.nowPage = 1 // 初始第一页
        this.load_table_url(this, '/workflow/process/flows.json', 'bean_table')
      },
      // 事件触发
      search() { // 查询函数
        this.table.bean_table.nowPage = 1 // 初始第一页
        this.load_table_url(this, '/workflow/process/flows.json', 'bean_table')
      },
      /* 通过url加载表格 */
      load_table_url(this_object, url, params_name) {
        this_object['table'][params_name].offset = (this_object['table'][params_name].nowPage - 1) * this_object['table'][params_name].limit// 后台分页参数
        this_object['table'][params_name].tableData = []// 清空原来的旧数据
        this_object['table'][params_name].order = 'asc'
        return request({
          loading: true,
          url: url,
          method: 'post',
          params: this_object['table'][params_name]// 请求参数
        }).then(rep => {
          // rep接收到的是字符串
          if (typeof rep === 'string') {
            rep = JSON.parse(rep)
          }
          this_object['table'][params_name].total = rep.total// 获取总条数
          this_object['table'][params_name].tableData = rep.rows// 获取返回数据
        })
      },
      // 重置
      resetForm() {
        this.table.bean_table.name = ''// 英文名
        this.table.bean_table.displayName = ''// 中文名
      },
      // 下一页触发的事件
      currentChange(index) {
        this.table.bean_table.nowPage = index // 初始第一页
        this.load_table_url(this, '/workflow/process/flows.json', 'bean_table')
      },
      // 新增
      addBean() {
        this.$router.push({
          path: '/flowMgt'
        })
      },
      // ======================表格======================
      // 编辑
      myEdit(item, index) {
      },
      // 发布
      myPublic(item, index) {
      },
      // 删除
      myDelete(item, index) {
      },
      // 复制
      myCopy(item, index) {
      }
    }
  }
</script>

<style scoped>
  .venus-list-page {
    -moz-user-select: text; /*火狐*/
    -webkit-user-select: text; /*webkit浏览器*/
    -ms-user-select: text; /*IE10*/
    -khtml-user-select: text; /*早期浏览器*/
    user-select: text;
  }
</style>
